<template>
  <section style="padding-top: 1rem;position: absolute;left: 0;right: 0;top: 0;">

    <yd-cell-group>
      <yd-cell-item>
        <span slot="left"><img src="../../assets/login/user.png" style="width: .37rem;height: .5rem;margin-right: .27rem"></span>
        <yd-input slot="right" v-model="input3" ref="input3" required :show-required-icon="false" :show-success-icon="false" :show-error-icon="false" regex="mobile" placeholder="请输入手机号" ></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left"><img src="../../assets/login/robot.png" style="width: .44rem;height: .5rem;margin-right: .2rem"></span>
        <yd-input slot="right"  :show-success-icon="false" v-model="input4" max="20" placeholder="证明你不是机器人"></yd-input>
        <img slot="right" id="txtMCodeImg" :src="yanzhengImg" @click="changeImg()">
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left"><img src="../../assets/login/code.png" style="width: .42rem;height: .5rem;margin-right: .22rem"></span>
        <input type="text" slot="right" placeholder="请输入验证码" v-model="yanzhengId">
        <yd-sendcode slot="right"
                     v-model="start1"
                     @click.native="sendCode1"
                     type="warning"
        ></yd-sendcode>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left"><img src="../../assets/login/psd.png" style="width: .42rem;height: .5rem;margin-right: .22rem"></span>
        <yd-input slot="right" type="password" max="20" v-model="input1" ref="input1" required :show-required-icon="false" :show-success-icon="false" :show-error-icon="false" :regex="psdReg" placeholder="请输入6到20位数字或字母"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left"><img src="../../assets/login/psd.png" style="width: .42rem;height: .5rem;margin-right: .22rem"></span>
        <yd-input slot="right" type="password" max="20" v-model="input2" required :show-required-icon="false" :show-success-icon="false" :show-error-icon="false"  placeholder="请确认密码"></yd-input>
      </yd-cell-item>
    </yd-cell-group>

    <yd-button size="large" type="danger" style="margin-top: 2rem;width: 96%;margin-left: 2%;" @click.native="regisBtn()">确认修改</yd-button>

  </section>
</template>

<script>
  export default {
    name:'forgetPsd',
    data(){
      return{
        start1:false,
        input1:'',
        input2:'',
        input3:'',
        input4:'',
        yanzhengId:'',
        psdReg:'/^[a-zA-Z0-9@_.]{6,20}$/',
        code:'',
        // intwo:false,
        yanzhengImg:window.g.apiUrl+'/util/imgVerifi.do',
      }
    },
    methods:{
      sendCode1(){

        const input3 = this.$refs.input3;
        if(input3.valid == false){
          this.$dialog.notify({
            mes: '请完善手机号',
            timeout: 1500,
          })
          return;
        }
        const that = this;
        that.$ajax.post(window.g.apiUrl+'/user/isPhone.do',JSON.stringify({
          phoneNum:that.input3,
        })).then((response)=> {
        if (response.data.code == 503) {

        that.$dialog.loading.open('发送中...');

        that.$ajax.post(window.g.apiUrl+'/util/message.do',JSON.stringify({
          phone:that.input3,
          flag:"2"
        }))
          .then((response)=>{
            setTimeout(() => {

              that.$dialog.loading.close();

              if(response.data.code == 200){
                that.start1 = true;
                that.$dialog.toast({
                  mes: '已发送',
                  icon: 'success',
                  timeout: 1500
                });
                that.code = response.data.data;
              }else{
                that.$dialog.toast({
                  mes: '验证码发送次数过多，请稍后重试',
                  icon:'error',
                  timeout: 1500,
                });
              }

            }, 1000);


          }).catch(()=>{
        });
          } else if(response.data.code == 200){
            that.$dialog.notify({
              mes: '该手机号未注册',
              timeout: 1500,
            })
          }else{
            that.$dialog.notify({
              mes: '发送失败，请稍后重试',
              timeout: 1500,
            })
          }
        }).catch(()=>{
        })
      },
      regisBtn(){
        let that = this;
        const input1 = this.$refs.input1;
        const input3 = this.$refs.input3;
        if(input3.valid == false){
          this.$dialog.notify({
            mes: '请完善手机号',
            timeout: 1500,
          })
          return;
        }
        if(this.input4 == ''){
          this.$dialog.notify({
            mes: '请输入图文验证码',
            timeout: 1500,
          })
          return;
        }

        this.$ajax.post(window.g.apiUrl+'/util/isVer.do',JSON.stringify({
          code:this.input4,
        })).then((response)=> {
          if (response.data.code == 200) {

            if(that.yanzhengId == ''){
              that.$dialog.notify({
                mes: '请输入验证码',
                timeout: 1500,
              });
              return;
            }
            if(that.yanzhengId != this.code){
              that.$dialog.notify({
                mes: '验证码输入有误',
                timeout: 1500,
              });
              return;
            }

            if(input1.valid == false){
              that.$dialog.notify({
                mes: '请完善密码',
                timeout: 1500,
              });
              return;
            }
            if(that.input1 != that.input2){
              that.$dialog.notify({
                mes: '两次密码输入不一致',
                timeout: 1500,
              });
              return;
            }
            that.$dialog.loading.open('信息正在提交');
            setTimeout(()=>{
            that.$ajax.post(window.g.apiUrl+'/user/upPass.do',JSON.stringify({
              phoneNum:that.input3,
              pass:that.input1,
            })).then((response)=> {
              that.$dialog.loading.close();
              if (response.data.code == 200) {
                that.$dialog.toast({
                  mes: '修改成功',
                  icon:'success',
                  timeout: 1000,
                  callback:()=>{
                    that.$router.push('/login');
                  }
                });

              } else {
                that.$dialog.toast({
                  mes: '修改失败，请稍后重试',
                  icon:'error',
                  timeout: 1500,
                });
              }
            }).catch(()=>{
            })
            },150)

          } else {
            that.$dialog.notify({
              mes: '图文验证码错误',
              timeout: 1500,
            });
          }
        }).catch(()=>{
        })


      },
      changeImg(){
        this.$ajax.post(window.g.apiUrl+'/util/imgVerifi.do')
          .then((response)=>{
            this.yanzhengImg = response.config.url+"?t="+Date.now();
          }).catch(()=>{
        })
      },
    },
    // watch:{
    //   input2(){
    //     if(this.input2 == this.input1){
    //       this.intwo = true;
    //     }else{
    //       this.intwo = false;
    //     }
    //   }
    // }
  }
</script>

<style scoped>

</style>
